<template>
  <div style="position: relative;">
    <div>
      <div class="ht-head-wrap">
        <div class="title-item"><router-link to="/ng-overall-view">全景农谷</router-link></div>
        <div class="title-item title-item-active"><router-link to="/sx-famous">三品一标</router-link></div>
        <div class="title-item"><router-link to="/sx-digital-greatCause">数字农业</router-link></div>
        <div class="title-item"><router-link to="/sx-technology">科技研发</router-link></div>
        <div class="title-item"><router-link to="/ng-remote-sensing">卫星遥感</router-link></div>
      </div>

      <div class="ht-content clear-float">
        <div class="content-left">
          <sx-left></sx-left>
        </div>
        <div class="content-middle">
          <sx-middle></sx-middle>
        </div>
        <div class="content-right">
          <sx-right></sx-right>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import SxLeft from './sx-left/sx-left.vue';
  import SxRight from './sx-right/sx-right.vue';
  import SxMiddle from './sx-middle/sx-middle.vue';

  export default {

    components: {
      SxLeft,
      SxRight,
      SxMiddle
    },
    data() {
      return {

      }
    },
  }
</script>

<style scoped lang="scss" type="text/scss">
  .content-left {
    left: 30px;
  }
  .content-right {
    // background-color: yellow;
    right: 30px;
  }
  // .content-middle {
  //   background-color: green;
  // }
</style>
